<template>
	<full-page-layout :safety="false">
		<view class="login-page">
			<view class="login-content">
				<view class="content-row1">
					<image class="logo-img" mode="aspectFit" src="/static/img/logo.png"></image>
				</view>
				<view class="content-row2">伟本智能（基准版）</view>
				<view class="content-row3">-智能仓储自动化系统-</view>
				<view class="form-view">
					<u--form ref="form" :model="form" :rules="rules" :labelWidth="0">
						<u-form-item prop="account">
							<u--input v-model.trim="form.account" prefix-icon="account" clearable>
								<template v-slot:suffix v-if="userVisited.length>1">
									<view @tap.stop="onChangePwdVisible">
										<u-icon name="arrow-down"></u-icon>
									</view>
								</template>
							</u--input>
						</u-form-item>
						<u-form-item prop="password">
							<input type="password" style="display:none;" />
							<u--input v-model.trim="form.password" :type="pwdVisible?'text':'password'" prefix-icon="lock" clearable @confirm="onLogin">
								<template v-slot:suffix>
									<view @tap.stop="onChangePwdVisible">
										<u-icon :name="pwdVisible?'eye-fill':'eye-off'"></u-icon>
									</view>
								</template>
							</u--input>
						</u-form-item>
					</u--form>
					<view class="login-btn-view">
						<u-button type="primary" text="登 录" @click="onLogin"></u-button>
					</view>
					<!-- form-view end  -->
				</view>
			</view>
			<view class="login-footer" v-if="version">应用版本号 {{version}}</view>
		</view>
		
		<view class="setting-target" :style="{top:safetyTop+'px'}" @tap.stop="onOpenSettingPicker">
			<u-icon name="setting-fill"></u-icon>
		</view>
		
		<easy-picker :visible.sync="userPickerVisible" :list="userVisited" value-field="account" label-field="account" @select="onChangeInputUser"></easy-picker>
		<easy-picker :visible.sync="settingPickerVisible" :list="settingList" @select="onGoSettingPage"></easy-picker>
	</full-page-layout>
</template>

<script>
import FullPageLayout from '@/components/FullPageLayout.vue'	
import EasyPicker from '@/components/EasyPicker.vue'
import { downloadApk } from '@/static/js/utils/index.js'
export default {
	name:'loginPage',
	components:{FullPageLayout,EasyPicker},
	data(){
		return {
			form:{
				account:'',
				password:''
			},
			rules:{
				account:{
					trigger:['change'],
					required: true,
					message:'请输入账号！'
				},
				password:{
					trigger:['change'],
					required: true,
					message:"请输入密码！"
				}
			},
			version:'',
			userVisited:[],
			userPickerVisible:false,
			settingList:['蓝牙连接','接口域名'],
			settingPickerVisible:false,
			pwdVisible:false,
			safetyTop:0
		}
	},
	methods:{
		onChangePwdVisible(){
			this.pwdVisible = !this.pwdVisible
		},
		onLogin(){
			this.$refs.form.validate().then(res => {
				uni.showLoading({ title: 'Loading...', mask:true });
				let account = this.$store.getters['user/getAccount'];
				if (account && account===this.form.account){
					this.getLoginInfo(f=>{
						if (f) {
							uni.navigateTo({url:this.$config.path.home})
						}
					})
				} else {
					this.doLogin((f1)=>{
						if (f1) {
							this.getLoginInfo(f2=>{
								if (f2) {
									uni.navigateTo({url:this.$config.path.home})
								}
							})
						}
					})
				}
			}).catch(errors => {
				
			})
		},
		doLogin(callback){
			let _params = {...this.form}
			this.$api.post('login',_params,{needToken:false,loading:false}).then((d)=>{
				this.$store.commit('user/setAccount',this.form.account)
				this.$store.commit('user/setToken',d)
				this.$store.commit('user/addVisited',{...this.form})
				callback && callback(true)
			}).catch(()=>{
				uni.hideLoading()
				callback && callback(false)
			})
		},
		getLoginInfo(callback){
			Promise.all([
				this.$api.get('getLoginUser',{},{loading:false}),
				this.$api.get('tree',{},{block:'sysDic',loading:false})
			]).then((response)=>{
				let _user = {...response[0]}
				delete _user.loginEmpInfo;
				delete _user.apps;
				delete _user.menus;
				this.$store.commit('user/setUserInfo',_user)
				this.$store.commit('system/setEnum',response[1])
				uni.hideLoading()
				callback && callback(true)
			}).catch(()=>{
				uni.hideLoading()
				callback && callback(false)
			})
		},
		onOpenUserPicker(){
			this.userPickerVisible = true
		},
		onChangeInputUser(val,obj){
			this.form.account = obj.account
			this.form.password = obj.password
		},
		onOpenSettingPicker(){
			this.settingPickerVisible = true
		},
		onGoSettingPage(val){
			if (val==='蓝牙连接') {
				uni.navigateTo({url:this.$config.path.bluetooth})
			} else if (val==='接口域名') {
				uni.navigateTo({url:this.$config.path.host})
			} else if (val==='新版下载') {
				downloadApk(this.$config)
			} 
		},
		getVersion(){
			this.version = this.$store.getters['system/getVersion']
		}
	},
	onLoad(){
		this.getVersion()
		this.safetyTop = this.$store.getters['system/getSafety'].top;
		if (process.env.NODE_ENV!=='development') {
			this.settingList.push('新版下载')
		}
	},
	onReady() {
		//进入登录页面就清楚登录信息
		this.$store.commit('user/clear')
		//获取之前的用户信息
		this.userVisited = this.$store.getters['user/getVisited'];
		if (this.userVisited.length===1) {
			this.form.account = this.userVisited[0].account
			this.form.password = this.userVisited[0].password
		}
	}
}
</script>

<style lang="scss" scoped>
.login-page{
	height: 100%;
	display: flex;
	flex-direction: column;
	.login-content{
		flex-grow: 1;
		overflow: auto;
		position: relative;
		.content-row1{
			height: 400rpx;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			.logo-img{
				height: 70%;
				width: 50%;
			}
		}
		.content-row2,.content-row3{
			text-align: center;
		}
		.content-row2{
			font-size: 56rpx;
			font-weight: bold;
		}
		.content-row3{
			font-size: 40rpx;
			padding-top: 20rpx;
			color: $uni-text-color-grey;
		}
		.form-view{
			padding: 50rpx 40rpx 0 40rpx;
			.login-form-item{
				margin-bottom: 32rpx;
			}
			.login-btn-view{
				padding-top: 20rpx;
			}
		}
	}
	.login-footer{
		flex-shrink: 0;
		padding: 10rpx 10rpx 4rpx 10rpx;
		font-size: 24rpx;
		color: $uni-text-color-grey;
		text-align: right;
	}
	.more-user-icon-btn{
		padding: 0 10rpx;
		font-size: 1.2em;
	}
}
.setting-target{
	$targetSize:80rpx;
	position: absolute;
	top: 0;
	right: 0;
	width: $targetSize;
	height: $targetSize;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	font-size: 40rpx;
}
</style>